<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <t-row :gutter="15" align="middle" class="head">
      <t-col :span="1">
        <div>
          护理项目名称
        </div>
      </t-col>
      <t-col :span="3">
        <div>
          <t-input v-model="params.name"/>
        </div>
      </t-col>
      <t-col :span="1">
        <div>
          状态
        </div>
      </t-col>
      <t-col :span="3">
        <div>
          <t-select v-model:value="params.status">
            <t-option key="able" label="启用" value="1" />
            <t-option key="baned" label="禁用" value="0" />
          </t-select>
        </div>
      </t-col>
      <t-col :span="3">
        <div>
          <t-button style="margin-left: 20px;" theme="default" @click="handleReset">重置</t-button>
          <t-button style="margin-left: 20px;" theme="primary" @click="handleSearch">搜索</t-button>
        </div>
      </t-col>
    </t-row>
    <t-button theme="primary" class="add-btn" @click="handleShow">新增护理项目</t-button>


    <t-space direction="vertical">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table
        row-key="index"
        :data="data"
        :columns="COLUMNS"
        :stripe="stripe"
        :bordered="bordered"
        :table-layout="tableLayout ? 'auto' : 'fixed'"
        :hover="hover"
        :size="size"
        :show-header="showHeader"
        cell-empty-content="-"
        resizable
        lazy-load
      >
        <template #rowIndex="{ rowIndex  }">
          {{rowIndex + 1 }}
        </template>
        <template #price="{ row  }">{{calPrice(row.price)}}</template>
        <template #gender="{ row }">
          {{row.gender == 1? '男' : '女'}}
        </template>
        <template #image="{row}">
          <div>
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                      <span><BrowseIcon size="1.4em" /> 预览</span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </div>
        </template>
        <template #op="{ row }">
<!--            <t-button variant="text" theme="danger" @click="handleDelete(row.id)">删除</t-button>-->
          <t-popconfirm content="确认删除吗" @confirm="handleDelete(row.id)">
            <t-button variant="text" theme="danger">删除</t-button>
          </t-popconfirm>
          <t-button variant="text" theme="default" @click="handleUpdate(row.id)">编辑</t-button>
          <t-button variant="text" theme="danger" @click="handleChangeStatus(row.id,row.status)">
            <span v-if="row.status === 1" style="color: red;">禁用</span>
            <span v-if="row.status === 0" style="color: green;">启用</span>
          </t-button>
        </template>
      </t-table>
    </t-space>

<!--    修改弹窗-->
    <DialogForm :visible="visible" @handleClose="handleClose" :data="nursingProject" :title="title"
    @handleAdd="handleAdd"
    @handleEdit="handleEdit"
    />


<!--    分页器-->
    <div class="pagination">
      <t-pagination :total="pages.total" :current="pages.page" :pageSize="pages.pageSize" @change="handlePageChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import DialogForm from '@/pages/serve/plan/project/components/DialogForm.vue'
import { ref ,defineEmits } from 'vue';
import {COLUMNS} from './constants'
import {onMounted} from 'vue'
import { projectAdd, projectUpdate,getProjectList, projectDelete ,getProjectDetails,projectStatus} from '@/api/serve'
import { FormLevel, page, ProjecListModel } from '@/api/model/serveModel'
import { MessagePlugin } from 'tdesign-vue-next'
const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);
const data = ref([]);
const pages = ref<page>({
  page: 1, pageSize: 5, pages: 0, total: 0
})
const params = ref({
  pageNum: pages.value.page,
  pageSize: pages.value.pageSize,
  name: '',
  status: '',
})

const currentPage = ref(1)

const visible = ref(false)
const title = ref('新增')

function handleSearch() {
  getData()
}
async function  getData(){
  await getProjectList(params.value).then((res: any) => {
    data.value = res.data.records
    pages.value.page = res.data.page
    pages.value.pageSize = res.data.pageSize
    pages.value.pages = res.data.pages
    pages.value.total = res.data.total
  })
}
function calPrice(val){
  if (String(val).indexOf('.') > -1){
    return val
  }else{
    return val + '.00'
  }
}
function handleReset() {
  params.value.pageNum = pages.value.page
  params.value.pageSize = pages.value.pageSize
  params.value.name = ''
  params.value.status = ''
  getData()
}

function handlePageChange(pageInfo){
  console.log("分页器发生便哈",pageInfo)
  params.value.pageNum = pageInfo.current
  params.value.pageSize = pageInfo.pageSize
  getData()
}

async function handleDelete(id) {
  console.log(id)
  await projectDelete(id).then((res: any) => {

    if(res.code === 200){
      MessagePlugin.success('删除成功')
      getData()
    }
  })
}
//声明方法
const emit = defineEmits([
  'onPageChange','handleBulid'
])
function handleShow() {
  title.value = '新增'
  visible.value = true
}
function handleClose() {
  visible.value = false
}
const nursingProject = ref<ProjecListModel>({
  createBy: 0,
  createTime: '',
  creator: '',
  id: 0,
  image: '',
  name: '',
  nursingRequirement: '',
  orderNo: 0,
  price: 0,
  status: 0,
  unit: '',
  updateBy: 0,
  updateTime: ''
})
async function handleUpdate(id) {
  console.log(id)
  await getProjectDetails(id).then((res: any) => {
    nursingProject.value = res.data
    title.value = '编辑'
    visible.value = true
  })
}

async function handleAdd(data: FormLevel) {
//   调用新增接口
  await projectAdd(data).then((res: any) => {
    console.log("返回结果",res)
    if(res.code == 200){
      getData()
      visible.value = false
      MessagePlugin.success('新增成功')
    }else{
      visible.value = false
      MessagePlugin.error(res.msg)
    }
  })
}
// 调用编辑接口
async function handleEdit(data:ProjecListModel) {
  // 调用编辑接口
  await projectUpdate(data).then((res: any) => {
    console.log("返回结果",res)
    if(res.code === 200){
      getData()
      visible.value = false
      MessagePlugin.success('编辑成功')
    }else{
      visible.value = false
      MessagePlugin.error(res.msg)
    }
  })
}

async function handleChangeStatus(id,status) {
  status = status === 1 ? 0 : 1
  const params = {
    id: id,
    status: status
  }
  await projectStatus(params).then((res: any) => {
    if(res.code === 200){
      MessagePlugin.success('状态修改成功')
      getData()
    }else{
      MessagePlugin.error(res.msg)
    }
  })
}

onMounted(async () => {
  getData()
  console.log(data.value)
  console.log(pages.value)
})

</script>

<style lang="less" scoped>
.pagination{
  margin-top: 20px;
  margin-bottom: 20px;
}
.head{
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 16px;
}

.add-btn{
  margin-bottom: 20px;
  float: right;
  margin-right: 20px;
}
</style>
